<template>
  <div class="data-v-6ab044b6">
    <!-- 弹框 -->
    <div v-if="archivesListId.needPassword">
      <Password />
    </div>
    <!-- 左侧栏 -->
    <Package :archivesListId="archivesListId" />
    <div class="left">
      <image-viewer class="imgview">
        <high-light>
          <div>
            <img class="cover" :src="archivesListId.cover" alt="" />
            <h1>{{ archivesListId.title }}</h1>
            <p class="issue">
              发布于{{ archivesListId.publishAt | formatDate("YYYY-MM-DD") }} •
              阅读量 {{ archivesListId.views }}
            </p>
            <div
              class="_1F8nZG_3e-sxtkzObh163H"
              v-html="archivesListId.html"
            ></div>
          </div>
        </high-light>
      </image-viewer>

      <!-- 评论 -->
      <div class="forum">
        <Comment :comment="comment"/>
      </div>

      <!-- 推荐阅读 -->
      <div class="cate">
        <h3>推荐阅读</h3>
      </div>
      <div class="read">
        <div class="detilearticle">
          <div class="item" v-for="item in articleList" :key="item.id">
            <ArticleItem :item="item" />
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <Floor :level="level"></Floor>
      <!-- 返回顶部 -->
      <BackTop />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import BackTop from "@/components/BackTop";
import ArticleItem from "@/components/ArticleItem";
import HighLight from "@/components/HighLight";
import ImageViewer from "@/components/ImageViewer";
import Package from "@/components/Package";
import Floor from "@/components/Floor";
import Comment  from '@/components/Konwledge/Comment.vue'
import Password from '@/components/Password'
export default {
  data() {
    return {
      level: [],
    };
  },
  components: {
    BackTop,
    ArticleItem,
    Comment,
    HighLight,
    ImageViewer,
    Package,
    Floor,
    Password
  },
  methods: {
    ...mapActions({
      getArchivesListId: "archives/getArchivesListId",
      getComment: "about/getComment",
    }),
    ...mapMutations({
      ArchivesListId: "archives/ArchivesListId",
    }),
  },
  computed: {
    ...mapState({
      articleList: (state) => state.article.articleList,
      archivesListId: (state) => state.archives.archivesListId,
      comment: (state) => state.about.comment,
    }),
  },

  created() {
    this.getArchivesListId(this.$route.params.id);
    //评论
    this.getComment();
  },

  mounted() {
    //目录
    let h1 = document.querySelector("._1F8nZG_3e-sxtkzObh163H h1");
    let h2 = document.querySelector("._1F8nZG_3e-sxtkzObh163H h2");
    let h3 = [...document.querySelectorAll("._1F8nZG_3e-sxtkzObh163H h3")];
    this.level = [h1, h2, h3].flat();
  },
};
</script>

<style scoped>
.main {
  position: relative;
}
.data-v-6ab044b6 {
  position: relative;
}
.left {
  background-color: #e7eaee !important;
}
.imgview {
  background-color: var(--bg);
}
.read {
  background-color: var(--bg);
}
h1 {
  margin: 0.67em 0 0;
  color: inherit;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1rem;
  line-height: 1.5;
  text-align: center;
}
.left {
  margin-bottom: 180px;
}
.left .SU8jTKpxU-YwxHLmnQU9s p {
  margin-bottom: 1.2em;
  color: inherit;
  font-style: italic;
  text-align: center;
}
.issue{
  text-align: center;
}
.cate {
  text-align: center !important;
  font-weight: normal !important;
}
.detilearticle {
  padding: 1rem;
}
.catalogue {
  position: sticky;
  top: 100px;
  right: 30px;
}
.aboutBottom .container .letf .commont {
  padding-top: 10px;
  width: 69%;
  height: 100%;
  background-color: var(--bg);
}
.footerbar {
  /* width: 1400px;*/
  width: 100%;
  height: 135px;
  margin-right:200px;
  position: absolute;
  background: var(--bg-footer);
  color: #ccc !important;
  left: 0;
  bottom: 0;
}
a {
  color: #ccc !important;
}
.footerbar footer {
  width: 100%;
  padding: 20px 0;
  border-top: 1px solid var(--border-color);
  text-align: center;
  color: #ccc !important;
}
</style>
